{include file="public/header"}
    <body>
        <style>
            .select-item span{
                font-size: 32px;
            }
            .layui-form-label{
                width: 200px;
            }
            .layui-input{
                width:70%;
            }
            .edit-limit{
                width: 75%;
            }
            .success_img{
                width: 100px;
                height: 100px;
                margin-top: 5px;
                margin-left: 9em;
                display: none;
            }
            .wrap{
                width: 96%;
                margin: 1em auto;
                overflow: hidden;
                text-align: center;
            }
        </style>

        <fieldset class="layui-elem-field">
            <legend><span style="color: #58a;">图文模板素材添加</span></legend>
            <div class="layui-field-box">
                <button onclick="window.history.go(-1);" class="layui-btn layui-btn-normal"><i class="layui-icon"></i> 返回</button>

                <form class="layui-form" action="">
                    <input type="hidden" name="edit_id" value="{$content['id']}">
                    <div class="layui-form-item">
                        <label class="layui-form-label">模板名称</label>
                        <div class="layui-input-block">
                            <input type="text" name="title" required value="{$content['title']}" lay-verify="required" placeholder="标题十个字左右最佳" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">封面图</label>
                        <div class="layui-input-block">
                            <input type="file" name="file" class="layui-upload-file">
                            <input type="hidden" name="book_img" value="{$content['book_img']}"><br>
                            <img class="success_img" src="{$content['book_img']}">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">模板主要内容</label><br><br><br>
                        <div class="layui-input-block edit-limit">
                            <script id="editor" name="content" type="text/plain" style="width:800px;height:500px;">
                                {$content['content']}
                            </script>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn" lay-submit lay-filter="admin-form">立即提交</button>
                            <span id="preview" class="layui-btn layui-btn-normal">预览</span>
                        </div>
                    </div>
                </form>
            </div>
        </fieldset>

        {include file="public/footer"}
        <script>
            var imgSrc = $(".success_img");
            if(imgSrc.attr('src').length > 20) {
                imgSrc.css('display','block');
            }

            layui.use('upload', function(){
                layui.upload({
                    url: "{:url('receiveImg')}",
                    success: function(res){
                        layer.msg(res.msg,{time:1800});
                        $("input[name='book_img']").attr('value', res.data);
                        imgSrc.attr('src', res.data);
                        imgSrc.show();
                    }
                });
            });
        </script>

        <script type="text/javascript" charset="utf-8" src="/editor/ueditor.config.js"></script>
        <script type="text/javascript" charset="utf-8" src="/editor/ueditor.all.min.js"> </script>
        <script type="text/javascript" charset="utf-8" src="/editor/lang/zh-cn/zh-cn.js"></script>
        <script>
            //创建一个编辑器
            var ue = UE.getEditor('editor');

            layui.use(['layer'], function() {
                $('#preview').on('click', function () {
                    var html = ue.getContent();
                    layer.open({
                        type: 1,
                        title: '手机端预览',
                        area: ['380px', '100%'],
                        maxmin: true,
                        content: '<div class="wrap">'+html+'</div>'
                    });
                });
            });
        </script>

        <script>
            //表单提交事件
            layui.use('form', function(){
                var form = layui.form();
                form.on('submit(admin-form)', function(data){
                    var params  = {
                        url : "{:url('addBoth')}",
                        data: data.field,
                        type: 'post',
                        sCallback:function(res){
                            layer.msg(res.msg,{time:1800},function(){
                                if(res.msg === '更新成功') {
                                    window.location.href = "{:url('artList')}";
                                }else {
                                    location.reload();
                                }

                            });
                        }
                    };
                    common.request(params);
                    return false;
                });

            });
        </script>
    </body>
</html>